<template>
	<view class="content flex-column bg-sub">
		<view class="flex-grow scroll-y full-width">
			<view class="top linear-bg">
				<view class="" :style="{ height: systemInfo.statusBarHeight + 'px' }">

				</view>
				<view class="flex align-center  text-inverse text-xl font-bold px-xl"
					:style="{ height: systemInfo.menuBtnInfo.height + 'px' }">
					我的
				</view>
				<view class="space" hover-class="none" hover-stop-propagation="false">

				</view>
			</view>
			<view class="bottom bg-white shadow-base radius-lg mx-xl p-lg">
				<view class="flex align-center justify-start mb-xl">
					<view class="flex align-center">
						<image @tap="toUserInfo" class="img-avatar"
							:src="userInfo.AvatarUrl || require('@/static/img/my/userimg.png')"></image>
					</view>
					<view class="flex-column ml-lg flex-grow">
						<view class="text-xl font-bold">
							{{ userInfo.WeiXinName ? entitiesToUtf16(userInfo.WeiXinName) : '微信用户' }}
						</view>
						<view class="text-sm text-grey mt-sm font-bold">
							{{ isLoggedIn ? '欢迎使用' : '登录后享受更多医疗服务' }}
						</view>
					</view>
				</view>
				<view class="" @tap="toLink(item.url)" v-for="(item, index) in tabs" :key="index">
					<view class="flex align-center justify-between bg-sub shadow-sm radius-lg p-lg mt-lg">
						<view class="flex align-center">
							<view
								class="tab-icon-bg bg-theme-lightest flex-column align-center justify-center radius-circle">
								<view :class="item.icon">

								</view>
							</view>
							<view class="text-lg font-normal ml-lg text-sub">
								{{ item.title }}
							</view>
						</view>
						<view class="cus-icon cus-icon-right">

						</view>
					</view>
				</view>
			</view>
		</view>
		<CustomTabbarVue></CustomTabbarVue>
	</view>
</template>

<script>
import CustomTabbarVue from '@/components/CustomTabbar.vue';
import {
	entitiesToUtf16
} from '@/utils/common';
import {
	GetUser
} from '@/api/modules/business';
import {
	mapGetters
} from 'vuex';
export default {
	components: {
		CustomTabbarVue
	},
	computed: {
		...mapGetters({
			loading: 'app/loading',
			systemInfo: 'system/systemInfo',
			appConfig: 'app/appConfig',
			isLoggedIn: 'user/isLoggedIn'
		})
	},
	data() {
		return {
			userInfo: {},
			tabs: [{
				title: '我的登记信息',
				url: '/pages/my/modules/patient',
				icon: 'cus-icon cus-icon-info text-theme'
			},
			{
				title: '我的登记单',
				url: '/pages/my/modules/registration',
				icon: 'cus-icon cus-icon-search text-theme'
			},
			{
				title: '我的提交',
				url: '',
				icon: 'cus-icon cus-icon-order text-theme'
			},
			{
				title: '意见反馈',
				url: '/pages/my/modules/opinions',
				icon: 'cus-icon cus-icon-opinions text-theme'
			}
			]
		}
	},
	onPullDownRefresh() {
		if (this.loading) {
			uni.stopPullDownRefresh()
		} else {
			this.init()
		}
	},
	onLoad() {
		this.init()
	},
	methods: {
		init() {
			this.getMyInfo()
		},
		getMyInfo() {
			GetUser().then(res => {
				if (res.Code == 200) {
					this.userInfo = res.Data

				}
			})
		},
		toUserInfo() {
			uni.navigateTo({
				url: '/pages/my/modules/userInfo'
			})
		},
		toLink(e) {
			if (e) {
				uni.navigateTo({
					url: e
				})
				return
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.content {
	background: linear-gradient(to bottom, $theme-color-lightest, $theme-color-light);
}

.top {
	border-radius: 0 0 $uni-border-radius-xl*3 $uni-border-radius-xl*3;

	.space {
		height: $uni-spacing-col-xl*5;
	}
}

.bottom {
	transform: translateY(-$uni-spacing-col-xl*1.6);

	.img-avatar {
		width: $uni-img-size-lg*1.8;
		height: $uni-img-size-lg*1.8;
	}

	.avatar-icon {
		font-size: $uni-img-size-lg*0.9;
	}

	.tab-icon-bg {
		width: $uni-img-size-lg;
		height: $uni-img-size-lg;
		font-size: $uni-img-size-lg*0.5;
	}
}
</style>